<template>
	<view class="container" v-if='status'>
		<!-- 输入框：用户名 -->
		<view class="input-group">
			<uni-easyinput  v-model="registerInfo.uname" placeholder="用户名/邮箱/手机号" :inputBorder="false"/>
		</view>
		<!-- 输入框：密码 -->
		<view class="input-group">
			<uni-easyinput  v-model="registerInfo.upwd" placeholder="密码" type="password" :inputBorder="false"/>
		</view>
		
		<!-- 输入框：密码 -->
		<view class="input-group">
			<uni-easyinput  v-model="registerInfo.reupwd" placeholder="确认密码" type="password" :inputBorder="false"/>
		</view>
		
		<!-- 邮箱 -->
		<view class="input-group">
			<uni-easyinput  v-model="registerInfo.email" placeholder="邮箱"  :inputBorder="false"/>
		</view>
		
		<!-- 电话 -->
		<view class="input-group">
			<uni-easyinput  v-model="registerInfo.phone" placeholder="手机号"  :inputBorder="false"/>
		</view>
		
		<!-- 按钮：提交 -->
		<button class="registerbtn" @click="register">注册</button>
		<!-- 超链接：跳转到登录组件 -->
		<view @click="gologin" :status="status" style="padding: 15rpx; color: #808080;">已有账号？前去登录</view>
	</view>
</template>

<script>
	export default {
		props:{
			status:{
				type:Boolean,
				default:''
			}
		},
		data() {
			return {
				registerInfo:{
					uname:null, //账号
					upwd:null, //密码
					reupwd:null,//确认密码
					email:null,
					phone:null,
				},
			};
		},
		methods:{
			Myalert(text){
				uni.showToast({
					title:text,
					icon:"error"
				})
			},
			check(){
				console.log('账号：',this.registerInfo.uname,'密码：',this.registerInfo.upwd,'确认密码：',this.registerInfo.reupwd,'邮箱：',this.registerInfo.email,'手机号：',this.registerInfo.phone);
			},
			register(){
				 // 表单验证
				 if(!this.registerInfo.uname){
					 this.Myalert('请填写账户')
					 return
				 }else if(!this.registerInfo.upwd){
					 this.Myalert("请填写密码")
					 return
				 }else if(!this.registerInfo.reupwd){
					 this.Myalert('请填写确认密码')
					 return
				 }else if(this.registerInfo.upwd!=this.registerInfo.reupwd){
					 this.Myalert('确认密码不一致')
					 return
				 }else if(!this.registerInfo.email){
					 this.Myalert('请填写邮箱')
					 return
				 }else if(!this.registerInfo.phone){
					 this.Myalert('请填写手机号')
					 return
				 }
				let url = this.$url.register
				uni.request({
					data:{
						uname:this.registerInfo.uname,
						upwd:this.registerInfo.upwd,
						reupwd:this.registerInfo.reupwd,
						email:this.registerInfo.email,
						phone:this.registerInfo.phone,
						},
					url:url,
					method:"POST",
					header:{
						"Content-Type":'application/x-www-form-urlencoded',
					},
				
				success: (res) => {
					console.log(res);
					uni.showToast({
						title:'注册成功',
						icon:'success',
						mask:true
					})
					this.registerInfo={}
					this.gologin()
				},
				fail: (err) => {
					console.log(err);
					uni.showToast({
						title:"注册失败,请稍后重试",
						icon:'error'
					})
					
				}
				
				})
			},
			gologin(){
				this.$emit('goToLogin',this.status)
			},
		}
	}
</script>

<style lang="scss">
.container{
	.registerbtn{
		margin: 40rpx 0 20rpx 0;
		border-radius: 40rpx;
		background-color: #0AA1ED;
		font-size: 24rpx;
		color: #FFFFFF;
		&:active{
			background-color: #0890d4;
		}
	}
	padding: 70rpx 35rpx;
	.input-group{
		margin-bottom: 20rpx;
		border-bottom: 1px solid #C8C7CC;
		display: flex;
		align-items: center;
		text{
			margin: 0 15rpx;
		}
	}
}
</style>
